<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Jsgx Mobile Data</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">    

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .link{
                color: #999;
                cursor: pointer;
                text-decoration: none;
            }
            .link:hover{
                color: #e80012;
            }
            .link-text{
                color: #999;
                text-decoration: none;
            }
            .page-header{
                text-align: center;
                margin: 0;
                padding: 0;
                border: 0;
                background: #ddd;
            }
            .page-header .title{
                font-size: 28px;
                padding-top: 15px;
                color: red;
            }
            .page-header .content{
                margin: 0;
                padding-bottom: 10px;
                font-size: 14px;
            }
            .page-content{
                margin-top: 2px;
            }
            .page-content .btn-lg {
                padding: 6px 12px;
                font-size: 18px;
                line-height: 1.33;
                border-radius: 6px;
            }
            .page-content .link{
                font-size: 18px;
            }
            .panel-footer .link{
                color: #999;
                text-decoration: none;
            }
            .panel-footer .links{
                text-align: center;
                color: #666;
                line-height: 30px;
            }
            .panel-footer .links .link{
                padding: 0 10px;
            }
            .panel-footer .links .link{
                color: #999;
                text-decoration: none;
            }
            .panel-footer .links{
                text-align: center;
                color: #666;
                line-height: 30px;
            }
            .navbar{
                margin-bottom: 0;
            }
            .navbar-header .links .link{
                font-size: 16px;
                color: #999;
                text-decoration: none;
                margin: 0 10px 0 10px;
            }
            .navbar-header .links{
                text-align: left;
                color: #666;
                line-height: 30px;
                padding-top: 10px;
            }
            .footer{
                margin: 40px 0 15px 0;
                padding-bottom: 10px;
            }
            .footer .links{
                text-align: center;
                color: #666;
                line-height: 30px;
            }
            .footer .links .link{
                padding: 0 10px;
            }
            .footer .copyright{
                text-align: center;
                color: #666;
                line-height: 30px;
            }
            .nav > li > a{
                padding: 7px 12px;
            }
            .modal-dialog .modal-content .btns .btn-lg{
                padding: 6px 12px;
                margin: 3px;
                font-size: 16px;
                line-height: 1.33;
                border-radius: 6px;
            }
            .modal-body .selected .selection-list{
                padding-right: 6px;
                color: red;
            }
            .modal-content .modal-header .modal-title{
                text-align: center;
                font-size: 24px;
                font-weight: bold;
                color: #666;
            }
            .tab-content .title{
                text-align: center;
                font-size: 20px;
                border: 1px solid #ddd;
                padding: 5px 3px;
            }
            .tab-content .content .table{
                text-align: center;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
    <!-- 页头部分 -->
        <div class="page-header">
          <p class="title">江苏个险战报</p>
          <p class="content">更新时间：2018-03-07</p>
        </div>

        <div class="page-content">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a class="link" href="#panel-content" id="all" data-toggle="tab">个险</a></li>
                <li role="presentation"><a class="link" href="#panel-content" id="tra" data-toggle="tab">传统</a></li>
                <li role="presentation"><a class="link" href="#panel-content" id="con" data-toggle="tab">顾问</a></li>
                <li role="presentation"><a class="link" href="#panel-content" id="ser" data-toggle="tab">服务</a></li>
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#KPIModal">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> KPI
                </button>
            </ul>

            <!-- <div class="tab-content">
                <div class="tab-pane title" id="panel-title"></div>
                <div class="tab-pane active content" id="panel-content"></div>
            </div> -->

            <div class="tab-content">
                <div class="tab-pane title"></div>
                <div class="tab-pane active content" id="panel-content">
                    
                </div>
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="KPIModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title" id="myModalLabel">KPI指标选项</p>
                        </div>
                        <div class="modal-body">
                            <div class="selected">
                                <table class="selections table table-condensed">
                                    <thead>
                                        <tr class="new">
                                            <td class="selection-title">您已选择：</td>
                                            <td class="selection-list" id="KPI-td"></td>
                                            <td class="selection-list" id="date-td"></td>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="btns">
                                <button type="button" class="btn btn-default btn-lg" id="aBtn">出勤人力</button>
                                <button type="button" class="btn btn-default btn-lg" id="bBtn">举绩人力</button>
                                <button type="button" class="btn btn-default btn-lg" id="cBtn">健康人力</button>
                                <button type="button" class="btn btn-default btn-lg" id="dBtn">绩优人力</button>
                                <button type="button" class="btn btn-default btn-lg" id="eBtn">标保达成率排名</button>
                                <button type="button" class="btn btn-default btn-lg" id="fBtn">标保同比排名</button>
                                <button type="button" class="btn btn-default btn-lg" id="gBtn">标保规模排名</button>
                                <button type="button" class="btn btn-default btn-lg" id="hBtn">新保期缴同比排名</button>
                                <button type="button" class="btn btn-default btn-lg" id="iBtn">新保规模排名</button>
                            </div>
                            <hr/>
                            <div class="btns" id="dateBtns">
                                <!-- <button type="button" class="btn btn-default btn-lg" id="dayBtn">日级数据</button>
                                <button type="button" class="btn btn-default btn-lg" id="monBtn">月份数据</button>
                                <button type="button" class="btn btn-default btn-lg" id="yeaBtn">年度数据</button> -->
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="submit-KPI-modal">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

        </div>

        <div class="footer">
            <div class="links">
                <a class="link" href="/wexin_info/99/100001/data">返回首页</a>
            </div>
            <p class="copyright">
                Copyright © 2018 cpic.com.cn All Right Reserved
            </p>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="/wexin_info/assets/js/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="/wexin_info/assets/js/bootstrap.min.js"></script>
        
        <!-- 开始编写交互逻辑 -->
        <script src="/wexin_info/assets/mdata.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){

                //使用 EL 表达式传入参数
                mdata.detail.getData({
                    typeId      : areaNum,
                    saleAttr    : saleAttr,
                    type        : tblType,
                    dataType    : dataType,
                    detail      : contentTitle
                });
                
                $("#all").click(function() {
                    saleAttr = 99;
                    mdata.detail.getData({
                        typeId          : areaNum,
                        saleAttr        : saleAttr,
                        type            : tblType,
                        dataType        : dataType,
                        panelTitle      : contentTitle
                    });
                });
                $("#tra").click(function() {
                    saleAttr = 10;
                    mdata.detail.getData({
                        typeId          : areaNum,
                        saleAttr        : saleAttr,
                        type            : tblType,
                        dataType        : dataType,
                        panelTitle      : contentTitle
                    });
                });
                $("#con").click(function() {
                    saleAttr = 13;
                    mdata.detail.getData({
                        typeId          : areaNum,
                        saleAttr        : saleAttr,
                        type            : tblType,
                        dataType        : dataType,
                        panelTitle      : contentTitle
                    });
                });
                $("#ser").click(function() {
                    saleAttr = 51;
                    mdata.detail.getData({
                        typeId          : areaNum,
                        saleAttr        : saleAttr,
                        type            : tblType,
                        dataType        : dataType,
                        panelTitle      : contentTitle
                    });
                });
                
                <!-- 日月度年度数据切换按钮 -->
                $("#dayBtn").click(function(){
                    dataType = 0;
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "date-td",
                        content   : $("#dayBtn").text()
                    })
                });
                $("#monBtn").click(function(){
                    dataType = 1;
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "date-td",
                        content   : $("#monBtn").text()
                    })
                });
                $("#yeaBtn").click(function(){
                    dataType = 2;
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "date-td",
                        content   : $("#yeaBtn").text()
                    })
                });
                
                <!-- homePage Btn -->
                $("#homePage").click(function(){
                    areaNum = 100001;
                    tblType = 0;
                    saleAttr = 99;
                    dataType = 0;
                    contentData = [];
                    contentTitle = -1;
                    mdata.detail.getData({
                        typeId      : areaNum,
                        saleAttr    : saleAttr,
                        type        : tblType,
                        dataType    : dataType,
                        detail      : contentTitle
                    });
                });
                
                // KPI 按钮
                // 出勤人力暂时没有数据
                $("#aBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 0;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#aBtn").text()
                    })
                });
                // 举绩人力
                $("#bBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 1;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#bBtn").text()
                    });
                    // 添加 月份(1)数据 选项
                    mdata.content.addDateBtn({
                        id          : "dateBtns",
                        content     : [1,1,0]
                    });
                });
                // 本月健康人力
                $("#cBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 2;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#cBtn").text()
                    });
                    // 添加 月份(1)数据 选项
                    mdata.content.addDateBtn({
                        id          : "dateBtns",
                        content     : [0,1,0]
                    });
                });
                // 绩优人力
                $("#dBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 3;
                    $("#dateBtns").empty();
                    // 向 用户已选择的表格添加 该项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#dBtn").text()
                    });
                    // 添加 月份(1)数据 选项
                    mdata.content.addDateBtn({
                        id          : "dateBtns",
                        content     : [0,1,0]
                    });
                });

                // 标保达成率排名
                $("#eBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 4;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#eBtn").text()
                    })
                });

                // 标保同比排名
                $("#fBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 5;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#fBtn").text()
                    })
                });

                // 标保规模排名
                $("#gBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 6;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#gBtn").text()
                    })
                });

                // 新保期缴同比排名
                $("#hBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 7;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#hBtn").text()
                    })
                });

                // 新保规模排名
                $("#iBtn").click(function() {
                    areaNum = 100003;
                    contentTitle = 8;
                    $("#dateBtns").empty();
                    // 向 表格添加 已选项
                    mdata.content.addTd({
                        id        : "KPI-td",
                        content   : $("#iBtn").text()
                    });
                    // 添加 月份(1)数据 选项
                    mdata.content.addDateBtn({
                        id          : "dateBtns",
                        content     : [1,1,1]
                    });
                });

                $("#submit-KPI-modal").click(function(){
                    // 是否需要使用 另一个类型的 content
                    // 这里需要判断的，根据是否选择 来决定
                    tblType = 1;
                    mdata.detail.getData({
                        typeId          : areaNum,
                        saleAttr        : saleAttr,
                        type            : tblType,
                        dataType        : dataType,
                        panelTitle      : contentTitle
                    });
                    $("#KPIModal").modal('hide');

                    // 为 tblType=1 的内容添加title
                    mdata.content.addTitle({
                        id          : "panel-title",
                        content     : contentTitle
                    })
                })
            })
        </script>
    </body>
</html>